<template>
    <div class="cardBox">
        <!-- 缺失次数 start -->
        <Card class="card">
            <p slot="title">完成次数</p>
            <RadioGroup slot="extra" type="button" v-model="wc" @on-change="xz">
                <Radio label="W">周</Radio>
                <Radio label="M">月</Radio>
                <Radio label="Y">年</Radio>
            </RadioGroup>
            <chart-line style="width: 38vw;height:400px" :value="lineData" :xAxisData="xAxisData" text="" />
        </Card> <!-- 缺失次数 end -->

        <!-- 完成次数 start -->
        <Card class="card">
            <p slot="title">完成次数</p>
            <RadioGroup slot="extra" type="button" v-model="wc" @on-change="xz">
                <Radio label="W">周</Radio>
                <Radio label="M">月</Radio>
                <Radio label="Y">年</Radio>
            </RadioGroup>
            <chart-line style="width: 38vw;height:400px" :value="lineData" :xAxisData="xAxisData" text="" />
        </Card><!-- 完成次数 end  -->

        <!-- 平均工作量 start -->
        <Card class="card">
            <p slot="title">平均工作量</p>
            <RadioGroup slot="extra" type="button" v-model="wc" @on-change="xz">
                <Radio label="W">周</Radio>
                <Radio label="M">月</Radio>
                <Radio label="Y">年</Radio>
            </RadioGroup>
            <chart-line style="width: 38vw;height:400px" :value="lineData" :xAxisData="xAxisData" text="" />
        </Card><!-- 平均工作量 end  -->

        <!-- 自错能改 start -->
        <Card class="card">
            <p slot="title">知错能改</p>

            <div slot="extra">
                <Form :model="search" class="search_box" inline label-position="right">
                    <FormItem label="分部：" class="fm">
                        <Select v-model="search.branchid">
                            <Option style="width:100px" v-for="item in branchList " :value="item.value" :key="item.value">{{ item.label }}</Option>
                        </Select>
                    </FormItem>

                    <FormItem label="时间：" class="fm">
                        <DatePicker :value="search.time" @on-change="formatTime($event)" type="date" format="yyyy-MM-dd" style="width: 110px;"></DatePicker>
                    </FormItem>

                    <FormItem label=" 姓名：" class="fm">
                        <Input v-model="search.name" style="width: 100px;"></Input>
                    </FormItem>

                    <FormItem class="fm">
                        <Button icon=" md-search" type="primary" @click="searchList">搜索</Button>
                    </FormItem>

                </Form>
            </div>

            <Table stripe :loading="loading" :columns="columns1" :data="data1" :height="400" style="width: 38vw;"></Table>
            <Page show-total show-sizer :total=total :current="currentPage" :page-size="pageSize" @on-page-size-change="getListByPageSize" @on-change="getListByPageNum" />
        </Card><!-- 自错能改 end  -->

    </div>
</template>
<script>
    import {
        ChartLine
    } from '_c/charts'
    import axios from '@/libs/api.request'
    export default {
        components: {
            ChartLine
        },
        data() {
            return {
                lineData: [{
                        name: '全部分部',
                        type: 'line',
                        data: [121, 752, 35, 78, 190, 430, 110]
                    }, {
                        name: '北环分部',
                        type: 'line',
                        data: [120, 132, 101, 134, 90, 230, 210]
                    },

                ],
                xAxisData: [],
                wc: 'W',

                loading: false,

                // 总条数
                total: 0,
                // 当前页
                currentPage: 1,
                // 每页条数
                pageSize: 10,

                // 搜索对象
                search: {
                    branchid: -1,
                    time: '',
                    name: ''
                },

                // 分部列表
                branchList: [],
                columns1: [{
                        title: '时间',
                        align: 'center',
                        key: 'username'
                    },
                    {
                        title: '姓名',
                        align: 'center',
                        key: 'request_url'
                    },
                    {
                        title: '分部',
                        align: 'center',
                        key: 'params'
                    },
                    {
                        title: '事项',
                        align: 'center',
                        key: 'ip'
                    }
                ],
                data1: [{
                        username: '测'
                    },
                    {
                        username: '测'
                    },
                    {
                        username: '测'
                    },
                    {
                        username: '测'
                    },
                    {
                        username: '测'
                    },
                    {
                        username: '测'
                    },
                    {
                        username: '测'
                    },
                    {
                        username: '测'
                    },
                    {
                        username: '测'
                    },
                    {
                        username: '测'
                    },
                    {
                        username: '测'
                    },
                    {
                        username: '测'
                    },
                    {
                        username: '测'
                    },
                    {
                        username: '测'
                    },
                    {
                        username: '测'
                    },
                    {
                        username: '测'
                    },
                    {
                        username: '测'
                    },
                    {
                        username: '测'
                    },
                    {
                        username: '测'
                    },
                    {
                        username: '测'
                    },
                    {
                        username: '测'
                    },
                    {
                        username: '测'
                    },
                    {
                        username: '测'
                    },
                    {
                        username: '测'
                    },
                    {
                        username: '测'
                    },
                    {
                        username: '测'
                    },
                    {
                        username: '测'
                    },
                    {
                        username: '测'
                    },
                    {
                        username: '测'
                    },
                    {
                        username: '测'
                    },
                    {
                        username: '测'
                    },
                    {
                        username: '测'
                    },
                ],
            }
        },
        methods: {

            // 获取分部列表
            getBranchList() {
                axios.ajax_post('admin-base-ajax_get_cp_linkage', {}).then(res => {
                    if (res.data.code === 1) {
                        // this.$Notice.success({
                        //     title: res.data.msg,
                        //     duration: 3
                        // })
                        // 数组深拷贝
                        this.branchList = JSON.parse(JSON.stringify(res.data.data.list))
                        this.branchList.unshift({
                            value: -1,
                            label: '全部'
                        })
                    } else {
                        this.$Notice.error({
                            title: res.data.msg,
                            duration: 3
                        })
                    }
                })
            },

            // 格式化时间
            formatTime(time) {
                this.search.time = time
            },

            xAxisDataInit() {
                for (let i = 1; i < 13; i++) {
                    this.xAxisData.push(`第${i}周`)
                }
            },
            xz(e) {
                console.log(e);

            },
            getListByPageSize(pageSize) {
                this.pageSize = pageSize
                this.getList()
            },

            getListByPageNum(page) {
                this.currentPage = page
                this.getList()
            }
        },
        created() {
            this.xAxisDataInit()
            this.getBranchList()
        },


    }
</script>
<style lang="less" scoped>
    .cardBox {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;

        .card {
            margin-bottom: 4vw;
        }
    }

    .search_box {
        display: flex;

        .fm {
            display: flex;
        }
    }

    .option div {
        width: 100px;
    }
</style>